<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>history API test</p>
    <button id="btn1">修改 url</button>

    <script>
      // 刷新页面，直接修改url 会去访问服务器
      // 浏览器的前进和后退，还有 js 修改 没有问题

      // 页面初次加载，获取hash
      document.addEventListener("DOMContentLoaded", () => {
        console.log("load", location.pathname);
      });

      document.getElementById("btn1").addEventListener("click", () => {
        const state = { name: "page1" };
        console.log("切换路由到", "page1");
        history.pushState(state, "", "page1");
      });

      window.onpopstate = (event) => {
        console.log("onpopstate", event.state, location.pathname);
      };
    </script>
  </body>
</html>
